<template>
	<div style="background: #f0f0f0">
		<Evaluate v-show="activeName === 'c'"></Evaluate>
		<div class="top">
			<van-tabs class="van-tab" v-model="activeName">
				<van-tab title="商品" name="a"></van-tab>
				<van-tab title="详情" name="b"></van-tab>
				<van-tab title="评价" name="c"></van-tab>
			</van-tabs>
			<!-- <router-link to="/detail"></router-link>
			<router-link to=""></router-link>
			<router-link to="/detail/evaluate"></router-link> -->
		</div>
		<router-view></router-view>
		<div v-show="activeName === 'a'">
			<!-- 轮播 -->

			<div class="lunbo">
				<van-swipe :height="400" @change="onChange">
					<van-swipe-item>
						<img :src="require('../assets/shan-2.jpg')" alt="" />
					</van-swipe-item>
					<van-swipe-item>
						<img :src="require('../assets/shan-3.jpg')" alt="" />
					</van-swipe-item>
					<van-swipe-item>
						<img :src="require('../assets/shan-4.jpg')" alt="" />
					</van-swipe-item>
					<van-swipe-item>
						<img :src="require('../assets/shan-5.jpg')" alt="" />
					</van-swipe-item>
					<template #indicator>
						<div class="custom-indicator">{{ current + 1 }}/4</div>
					</template>
				</van-swipe>
			</div>
			<!-- 介绍 -->
			<div class="detail-box">
				{{ $route.path }}
				<h4>
					俞兆林卫衣 男2017春新款运动休闲印花大码潮人卫衣卫裤加厚外套套装男<br />
					<p>
						<b class="b">¥296.00</b>
						<br />
						<span class="b-span"
							>【2017春季全场2件8】春款薄绒休闲套头纯色印花连帽大码卫衣套装新款上新！！</span
						>
					</p>
				</h4>
			</div>
			<!-- 优惠 -->
			<div class="hui">
				<div class="hui-con">
					<div class="hui-l">
						<p>优惠</p>
					</div>
					<div class="hui-r">
						<i>
							<span><a class="a1" href="">优惠券</a> </span>
							<span>满197.00减40.00</span>
						</i>
						<br />
						<i>
							<span><a class="a1" href="">优惠券</a> </span>
							<span>满197.00减40.00</span>
						</i>
						<br />
						<a class="a" href="">去领券</a>
					</div>
				</div>
			</div>
			<!-- 尺码颜色 -->
			<div class="wy-media-box2">
				<div class="wy-media-box2-top">
					<div class="wy-media-box2-l">尺码</div>
					<div class="wy-media-box2-r">
						<a href="">25</a>
						<a href="">25</a>
						<a href="">25</a>
						<a href="">25</a>
						<a href="">25</a>
						<a href="">25</a>
					</div>
				</div>
				<!-- 底部 -->
				<div class="wy-media-box2-bot">
					<div class="wy-media-box2-l">颜色</div>
					<div class="wy-media-box2-r-1">
						<a href="">黑色</a>
						<a href="">黑色</a>
						<a href="">黑色</a>
						<a href="">黑色</a>
						<a href="">黑色</a>
						<a href="">黑色</a>

						<!-- <a href="">25</a> -->
					</div>
				</div>
			</div>
			<!-- 地址 -->
			<div class="add">
				<div class="add-con">
					<p>
						<van-col span="3">送至</van-col>
						江苏&nbsp;&nbsp;&nbsp;宿迁&nbsp;&nbsp;&nbsp;洋河&nbsp;&nbsp;&nbsp;新区
					</p>
					<p><van-col span="3">送至</van-col>&nbsp;&nbsp;&nbsp;&nbsp;免运费</p>
					<p><van-col span="3">商家</van-col>蓝之蓝股份有限公司</p>
					<p><van-col span="3">提升</van-col>支持7天无理由退换货</p>
				</div>
			</div>
			<div style="height: 80px"></div>
			<!-- 提交 -->
			<div style="z-index: 999; position: fixed">
				<van-goods-action>
					<van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
					<van-goods-action-icon icon="cart-o" text="购物车" />
					<van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
					<van-goods-action-button type="warning" text="加入购物车" />
					<van-goods-action-button type="danger" text="立即购买" />
				</van-goods-action>
			</div>
		</div>
	</div>
</template>
<style scoped lang="scss">
.top {
	width: 100%;
	position: fixed;
	top: 0;
	background: rgb(240, 240, 240);
	// height: 33px;
	// display: flex;
	z-index: 99;
	// justify-content: space-around;
	border-bottom: 1px rgb(196, 196, 196) solid;
	line-height: 43px;
	a {
		line-height: 33px;
		color: grey;
	}
}

.lunbo {
	height: 400px;
}
.custom-indicator {
	position: absolute;
	right: 5px;
	bottom: 5px;
	padding: 2px 5px;
	font-size: 12px;
	background: rgba(0, 0, 0, 0.1);
}
.detail-box {
	width: 100%;
	background: white;
	border-bottom: 1px rgb(167, 162, 162) solid;
}
h4 {
	width: 98%;
	margin: 0 auto;
	font-weight: 200;
	font-size: 0.9rem;
}
.b {
	color: red;
	font-size: 1.3rem;
}
.b-span {
	font-weight: 200;
	font-size: 0.9rem;
}
.hui {
	width: 100%;
	background: white;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 10px;
	border-top: 1px rgb(182, 175, 175) solid;
	border-bottom: 1px rgb(182, 175, 175) solid;
}
.hui-con {
	width: 50%;
	display: flex;
	justify-content: space-around;
	// background: rgb(144, 165, 88);
}
.hui-l {
	width: 20%;

	// background: pink;
	p {
		line-height: 30px;
		text-align: center;
	}
}
.a1 {
	padding: 0.2rem;
	font-size: 0.5rem;
	border: 1px red solid;
	color: red;
}
.hui-r {
	font-size: 0.5rem;
	// background: rgb(255, 242, 246);
	i {
		display: block;
		padding-top: 0.1rem;
	}
	.a {
		padding: 0.2rem;
		font-size: 0.5rem;
		background: red;
		color: white;
	}
}
.wy-media-box2 {
	width: 100%;
	background: white;
	padding-bottom: 10px;
	border-bottom: 1px rgb(182, 175, 175) solid;
}
.wy-media-box2-top {
	width: 60%;
	// background: pink;
	margin-top: 15px;
	margin-left: 15px;
	// margin: 0 auto;
	display: flex;
	justify-content: space-around;
	.wy-media-box2-l {
		// width: 16%;
		color: grey;
		// background: rgb(119, 96, 100);
	}
}
.wy-media-box2-bot {
	width: 80%;
	// background: pink;
	margin-top: 15px;
	margin-left: 15px;
	// margin: 0 auto;
	display: flex;
	justify-content: space-around;
}
.wy-media-box2-r {
	// width: 60%;

	display: flex;
	// flex-wrap: wrap;
	justify-content: space-around;
	a {
		margin-left: 5px;
		display: block;
		padding: 5px;
		border: 1px solid #ddd;
		border-radius: 3px;
		background-color: #fff;
	}
}
.wy-media-box2-r-1 {
	width: 90%;
	font-size: 0.2rem;
	// background: rgb(202, 87, 87);
	display: flex;
	// flex-wrap: wrap;
	justify-content: space-around;
	a {
		margin-left: 5px;
		display: block;
		padding: 5px;

		border: 1px solid #ddd;
		border-radius: 3px;
		background-color: #fff;
	}
}
.add {
	margin-top: 10px;
	width: 100%;
	background: white;
	font-size: 0.8rem;
	color: #222;
	padding-bottom: 10px;
	border-top: 1px rgb(182, 175, 175) solid;
	border-bottom: 1px rgb(182, 175, 175) solid;
	.add-con {
		width: 94%;
		margin: 0 auto;
	}
}
.van-col {
	color: #81838e;
}
</style>
<script>
import Evaluate from '@/views/Evaluate'
export default {
	components: { Evaluate },
	data() {
		return {
			current: 0,
			activeName: 'a',
		}
	},
	methods: {
		onChange(index) {
			this.current = index
		},
	},
}
</script>